<template>
<div>

  <ul v-for="(item,index) in imgg" :key="item.index">
    <li>
       <input type="checkbox"  :checked="item.isActive"  >
             <img :src="item.url" alt=""   @click="sele(index)">
         </li>
  </ul>
   
 
  </div>
</template> 

<script>
export default {
  data() {
    return {

      imgg: [
        {isActive:false,
          url: "http://ti3.redocn.com/20200402/5e853f62510ea.jpg",
          id:1
        },
        {isActive:false,
          url: "http://ti3.redocn.com/20190925/5d8b0675adceb.jpg"
        },
        {isActive:false,
          url: "http://ti3.redocn.com/20190916/5d7f31d5a8ff8.jpg"
        },
        {isActive:false,
          url: "http://ti3.redocn.com/20190916/5d7f31d439723.jpg"
        },
        {isActive:false,
          url: "http://ti3.redocn.com/20190916/5d7f31d378a15.jpg"
        },
        {isActive:false,
          url: "http://ti3.redocn.com/20190916/5d7edba0c4800.jpg"
        },
        {isActive:false,
          url: "http://ti3.redocn.com/20190909/5d75bd3a127d9.jpg"
        }
      ]
    };
  },
  methods: {
    sele(index){
    for(let i = 0; i < this.imgg.length; i++) {
      if(index===i){
        this.imgg[i].isActive= !this.imgg[i].isActive
      }
    }
    }
  },
};
</script>

<style lang="less" scoped>
li{
  list-style: none;
  float: left;
  margin: 15px;
}
</style>